<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备控制与实时监控</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
            color: #333;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            height: 100vh;
        }

        h1 {
            text-align: center;
            margin-top: 20px;
            color: #5e5e5e;
        }

        /* 容器 */
        .container {
            width: 80%;
            margin-top: 20px;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        /* 视频部分 */
        #video-container {
            text-align: center;
            margin-bottom: 30px;
        }

        #video {
            width: 80%;
            max-width: 600px;
        }

        /* 导航部分 */
        nav {
            text-align: center;
            margin-bottom: 30px;
        }

        nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #007bff;
            font-size: 18px;
            font-weight: bold;
        }

        nav a:hover {
            color: #0056b3;
        }

        /* 控制面板样式 */
        form {
            display: flex;
            flex-wrap: wrap; /* 使表单项换行 */
            gap: 15px; /* 为表单项添加间距 */
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        form label {
            width: 100%;
            font-weight: bold;
            margin-top: 10px;
            display: block;
        }

        /* 控制面板中的文本框 */
        form input[type="text"] {
            width: calc(50% - 10px); /* 每行两个输入框，增加灵活性 */
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        /* 控制面板中的开关 */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 34px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            border-radius: 50%;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.4s;
        }

        input:checked + .slider {
            background-color: #007bff;
        }

        input:checked + .slider:before {
            transform: translateX(26px);
        }

        /* 按钮样式 */
        .submit-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            margin-top: 20px;
            width: 100%;
            transition: background-color 0.3s ease;
        }

        .submit-btn:hover {
            background-color: #0056b3;
        }

        /* 响应式布局 */
        @media screen and (max-width: 768px) {
            .container {
                width: 90%;
            }

            form input[type="text"] {
                width: 100%; /* 小屏幕下表单项占满全宽 */
            }

            nav a {
                font-size: 16px;
            }

            .submit-btn {
                font-size: 16px;
            }
        }
    </style>
</head>
<body onload="init()">
    <h1>设备控制与实时监控</h1>

    <!-- 导航 -->
    <nav>
        <a href="login.html">登录</a>
        <a href="temp_stm32.html">控制面板</a>
        <a href="temp_modbus.html">数据显示页面</a>
    </nav>

    <!-- 实时视频显示 -->
    <div id="video-container">
        <img src="http://192.168.50.201:8080/?action=stream" alt="加载视频失败">
    </div>

    <!-- 控制面板 -->
    <div class="container">
        <form>
            <label for="temperature">人体温度</label>
            <input type="text" id="temperature" value="" />

            <label for="bat">电池电量</label>
            <input type="text" id="bat" value="" />

            <label for="heart">心率</label>
            <input type="text" id="heart" value="" />

            <label for="temperature_modbus">环境温度</label>
            <input type="text" id="temperature_modbus" value="" />

            <label for="humidity">空气湿度</label>
            <input type="text" id="humidity" value="" />

            <label for="air-temp">温度阈值</label>
            <input type="text" id="air-temp" value="" />

            <label for="light-data">环境亮度</label>
            <input type="text" id="light-data" value="" />

            <label for="oxygen-data">血氧采集</label>
            <input type="text" id="oxygen-data" value="" />

            <!-- 开关控制部分 -->
            <div style="width: 100%; display: flex; flex-wrap: wrap; gap: 15px;">
                <div style="width: 48%;">
                    <label for="VehACSwitch">空调开关</label>
                    <label class="switch">
                        <input type="checkbox" id="VehACSwitch" />
                        <span class="slider"></span>
                    </label>
                </div>

                <div style="width: 48%;">
                    <label for="AlarmSwitch">蜂鸣器开关</label>
                    <label class="switch">
                        <input type="checkbox" id="AlarmSwitch" />
                        <span class="slider"></span>
                    </label>
                </div>

                <div style="width: 48%;">
                    <label for="FanSwitch">风扇开关</label>
                    <label class="switch">
                        <input type="checkbox" id="FanSwitch" />
                        <span class="slider"></span>
                    </label>
                </div>

                <div style="width: 48%;">
                    <label for="motor">马达</label>
                    <label class="switch">
                        <input type="checkbox" id="motor" />
                        <span class="slider"></span>
                    </label>
                </div>

                <div style="width: 48%;">
                    <label for="Flame_State">火焰传感器</label>
                    <label class="switch">
                        <input type="checkbox" id="Flame_State" />
                        <span class="slider"></span>
                    </label>
                </div>

                <div style="width: 48%;">
                    <label for="button">呼叫按钮</label>
                    <label class="switch">
                        <input type="checkbox" id="button" />
                        <span class="slider"></span>
                    </label>
                </div>

                <div style="width: 48%;">
                    <label for="light">室内灯光</label>
                    <label class="switch">
                        <input type="checkbox" id="light" />
                        <span class="slider"></span>
                    </label>
                </div>

                <div style="width: 48%;">
                    <label for="oxygen_switch">供氧开关</label>
                    <label class="switch">
                        <input type="checkbox" id="oxygen_switch" />
                        <span class="slider"></span>
                    </label>
                </div>

                <div style="width: 48%;">
                    <label for="LEDSwitch">LED灯光</label>
                    <label class="switch">
                        <input type="checkbox" id="LEDSwitch" />
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
        </form>
    </div>

    <!-- 实时环境数据图表 -->
    <div class="container">
        <canvas id="line-chart"></canvas>
    </div>

    <script>
        // 模拟实时环境数据
        const ctx = document.getElementById('line-chart').getContext('2d');
        let chart;
        let timeSeries = [];
        let temperatureData = [];
        let humidityData = [];
        let brightnessData = [];

        // 初始化Chart.js图表
        function initChart() {
            chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: timeSeries,
                    datasets: [
                        {
                            label: '温度 (°C)',
                            data: temperatureData,
                            borderColor: 'rgba(255, 99, 132, 1)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            fill: true,
                            tension: 0.3,
                        },
                        {
                            label: '湿度 (%)',
                            data: humidityData,
                            borderColor: 'rgba(54, 162, 235, 1)',
                            backgroundColor: 'rgba(54, 162, 235, 0.2)',
                            fill: true,
                            tension: 0.3,
                        },
                        {
                            label: '亮度 (Lux)',
                            data: brightnessData,
                            borderColor: 'rgba(75, 192, 192, 1)',
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            fill: true,
                            tension: 0.3,
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: { title: { display: true, text: '时间' } },
                        y: { title: { display: true, text: '值' }, min: 0 }
                    },
                    plugins: {
                        tooltip: {
                            enabled: true,
                            mode: 'nearest',
                            intersect: false,
                            callbacks: {
                                title: function(tooltipItems) {
                                    return '时间: ' + tooltipItems[0].label;
                                },
                                label: function(tooltipItem) {
                                    const datasetLabel = tooltipItem.dataset.label || '';
                                    const value = tooltipItem.raw.toFixed(2);
                                    return datasetLabel + ': ' + value;
                                }
                            }
                        }
                    }
                }
            });
        }

        // 模拟获取实时数据并更新图表
        function updateChart() {
            const now = new Date();
            const timeLabel = now.toLocaleTimeString();

            // 模拟数据
            const temperature = Math.random() * 30 + 10;
            const humidity = Math.random() * 40 + 30;
            const brightness = Math.random() * 500 + 100;

            timeSeries.push(timeLabel);
            temperatureData.push(temperature);
            humidityData.push(humidity);
            brightnessData.push(brightness);

            if (timeSeries.length > 20) {
                timeSeries.shift();
                temperatureData.shift();
                humidityData.shift();
                brightnessData.shift();
            }

            chart.update();
        }

        setInterval(updateChart, 1000);
        initChart();
    </script>
</body>
</html>
